<form nz-form [formGroup]="validateForm" (ngSubmit)="submit()">
    <div nz-row nzGutter="8">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSpan]="4">状态</nz-form-label>
          <nz-form-control [nzSpan]="20">
            <nz-switch formControlName="status" nzCheckedChildren="冻结" nzUnCheckedChildren="正常"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzGutter="8">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label nzRequired>
            用户帐号
            <nz-tooltip [nzTitle]="'用户帐号，3-15位英文或数字或英文数字组合。'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </nz-form-label>
          <nz-form-control nzHasFeedback>
            <input nz-input formControlName="account" placeholder="请输入">
            <nz-form-explain *ngIf="validateForm.get('account').dirty && validateForm.get('account').errors || validateForm.get('account').pending ">
              <ng-container *ngIf="validateForm.get('account').hasError('required')">
                请输入帐号
              </ng-container>
              <ng-container *ngIf="validateForm.get('account').hasError('correct')">
                请输入正确格式'3-15位英文或数字或英文数字组合'的帐号
              </ng-container>
              <ng-container *ngIf="validateForm.get('account').hasError('duplicated')">
                帐号已存在
              </ng-container>
              <ng-container *ngIf="validateForm.get('account').pending">
                正在校验...
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label nzRequired>
            用户密码
            <nz-tooltip [nzTitle]="'用户密码，至少6位英文或数字或英文数字组合。'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </nz-form-label>
          <nz-form-control>
            <input nz-input type="password" formControlName="password">
            <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">
              <ng-container *ngIf="validateForm.get('password').hasError('required')">
                请输入密码
              </ng-container>
              <ng-container *ngIf="validateForm.get('password').hasError('correct')">
                请输入正确格式'至少6位英文或数字或英文数字组合'的密码
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzGutter="8">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label nzRequired>角色</nz-form-label>
          <nz-form-control>
            <nz-select [nzMaxMultipleCount]="10" style="width: 100%" nzMode="multiple" nzPlaceHolder="请选择" formControlName="roles">
              <nz-option *ngFor="let option of rolesOptions" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('roles').dirty && validateForm.get('roles').errors">请输入选择角色</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label nzRequired>
            手机号
            <nz-tooltip [nzTitle]="'11位手机号码，不支持海外手机。'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="phone" placeholder="请输入">
            <nz-form-explain *ngIf="validateForm.get('phone').dirty && validateForm.get('phone').errors">
              <ng-container *ngIf="validateForm.get('phone').hasError('required')">请输入手机号</ng-container>
              <ng-container *ngIf="validateForm.get('phone').hasError('correct')">请输入正确的手机号</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzGutter="8">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label>性别</nz-form-label>
          <nz-form-control>
            <nz-radio-group formControlName="gender">
              <label nz-radio [nzValue]="0">男</label>
              <label nz-radio [nzValue]="1">女</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label>邮箱</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="email" placeholder="请输入">
            <nz-form-explain *ngIf="validateForm.get('email').dirty && validateForm.get('email').errors">请输入正确的邮箱</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>



  </form>
